import React, { useEffect, useState } from 'react';
import './index.css';

import mzsdk from '../../../../utils/mzsdk'

import BulletScreen from 'rc-bullets';
import { replaceEm } from '../EmojiManager';

/**
 * 弹幕组件
 */

var barrageManager = null;

export default class Barrage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isCanSendBarrage: false,//控制台是否可以发送弹幕
            isShowBarrage: true,//本地是否显示弹幕

            isLoadBarrage: false,//是否加载弹幕组件
        }
    }

    componentWillUnmount() {
        mzsdk.mzee.off('barrage_send_msg');
        mzsdk.mzee.off('barrage_can_send');
        mzsdk.mzee.off('barrage_is_show');
        mzsdk.mzee.off('barrage_start')
    }

    componentDidMount() {
        var _this = this;

        // 发送弹幕监听
        mzsdk.mzee.on('barrage_send_msg', function (e) {
            if (_this.state.isCanSendBarrage == true && _this.state.isShowBarrage == true && _this.state.isLoadBarrage == true) {
                let msg = {
                    nickname: e.nickname ? e.nickname : e.userName,
                    avatar: e.avatar,
                    text: e.text
                }
                _this.sendBarrage(msg)
            }
        })
        // 服务器弹幕开关监听，是否可以发送弹幕
        mzsdk.mzee.on('barrage_can_send', function (e) {
            _this.setState({
                isCanSendBarrage: e
            })
            if (e == true && _this.state.isShowBarrage == true) {
                _this.showBarrage()
            } else {
                _this.hideBarrage();
            }
        })
        // 本地弹幕开关监听，是否显示弹幕
        mzsdk.mzee.on('barrage_is_show', function (e) {
            _this.setState({
                isShowBarrage: e
            })
            if (e == true && _this.state.isCanSendBarrage == true) {
                _this.showBarrage()
            } else {
                _this.hideBarrage();
            }
        })
        // 加载弹幕组件
        mzsdk.mzee.on('barrage_start', function (e) {
            _this.setState({
                isLoadBarrage: true
            }, () => {
                _this.startBarrage()
            })
        })
    }

    startBarrage = () => {
        if (barrageManager == null) {
            barrageManager = new BulletScreen('.mz-commentCanvas-container', { 'trackHeight': 22, 'duration': 5 });
        }
    }

    clearBarrage = () => {
        if (barrageManager) {
            barrageManager.clear()
        }
    }
    pauseBarrage = () => {
        if (barrageManager) {
            barrageManager.pause()
        }
    }

    hideBarrage = () => {
        if (barrageManager) {
            barrageManager.clear()
            barrageManager.hide()
        }
    }

    showBarrage = () => {
        if (barrageManager) {
            barrageManager.clear()
            barrageManager.show()
        }
    }

    sendBarrage = (msg) => {
        // push 纯文本
        // barrageManager.push(bullet);
        console.log('发送的弹幕：',msg)

        // push 自定义
        if (barrageManager) {
            barrageManager.push(
                <div className="mz-barrage-item">
                    <img src={msg.avatar} className="mz-barrage-avatar"></img>
                    {/* <div className="mz-barrage-text">{msg.nickname}：{msg.text}</div> */}
                    <div className="mz-barrage-text"  dangerouslySetInnerHTML={{ __html: msg.nickname + "：" + replaceEm(msg.text) }}></div>
                </div>
                , { 'duration': Math.floor(Math.random() * 4 + 3) });
        }
    }

    render() {
        let { isLoadBarrage } = this.state;
        return (
            <div className="mz-commentCanvas-container" style={{ height: this.props.height ? this.props.height : '2.4rem', display: isLoadBarrage == true ? 'block' : 'none'}}>
            </div>
        )
    }
}
